<template>
	<div>
		<div>{{ count1 }}</div>
		<div>{{ count2 }}</div>
		<button @click="add">add</button>
	</div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, toRefs, watchPostEffect, watchEffect } from 'vue'
const count1 = ref(0)
const state = reactive({
	count2: 0,
})
const count2 = toRefs(state).count2
const add = () => {
	count1.value += 1
	count2.value += 2
}

// 1.监听整个reactive对象，
// 2.监听单个属性，需要如下写成函数 () => state.count2
const { stop, pause, resume } = watch(
	[count1, () => state.count2],
	(newVal, oldVal) => {
		console.log(newVal, oldVal)
		if (count1.value === 2) {
			// 暂停侦听器
			// pause();
			// 稍后恢复
			// resume();
			// 停止
			stop()
		}
		// onWatcherCleanup(() => {
		// 	console.log('watcher cleanup,再次执行前会调用，可以在这里做一些清理工作，比如清除定时器等，当时执行后，watcher会被停止');
		// });
	},
	{
		// deep: true,
		// immediate: true, // 立马执行一次
		// flush: 'pre', // pre 组件更新前调用，sync 同步执行，post 组件更新后执行，watchPostEffect 这个api对应post配置的效果
		// once: true, // 只监听一次
	}
)
watchEffect(() => {
	console.log('watchEffect 组件更新时执行', count1.value)
})
watchPostEffect(() => {
	console.log('watchPostEffect 组件更新后执行', count1.value)
})
</script>

<style scoped></style>
